埋点那些事-web篇

点击上方「蓝字」关注我们

豆皮粉儿们，大家好呀，今天这一期，由字节跳动数据平台的「silence」同学给大家带聊聊埋点那些事-web篇。

欢迎加入我们团队，「豆皮范儿」后台回复【内推】直通部门内推，「豆皮范儿」后台回复【加群】，欢迎咨询和交流。

作者：silence

什么是埋点：

埋点是数据采集中的一个统称，通常也叫做事件追踪（Event Tracking），它主要针对特定用户行为或事件进行捕获、处理和发送的相关技术及其实施过程。埋点是为了满足快捷、高效、丰富的数据应用而做的用户行为过程及结果记录。数据埋点是一种常用的数据采集的方法。埋点是数据的来源，采集的数据可以分析网站/APP的使用情况，用户行为习惯等，是建立用户画像、用户行为路径等数据产品的基础。

埋点有什么作用：

对于产品来说，埋点可以在应用中特定的流程收集一些信息，用来跟踪应用使用的状况，后续用来进一步优化产品或是提供运营的数据支撑，包括访问数（Visits），访客数（Visitor），停留时长（Time On Site），页面浏览数（Page Views）和跳出率（Bounce Rate）等等。简单的说可以总结为以下几点：

•1、提高渠道转化：通过用户的操作序列，找到用户流失的节点。•2、改善产品：通过用户行为分析产品是否有问题，例如用户有没有因为设计按钮过多导致用户行为无效等问题，以此发现功能设计缺陷等。•3、精准客户运营：对客户进行分组（例如有的喜欢打折购买，有的喜欢直接购买等），实现精准营销，发放优惠券等。•4、完善客户画像：基本属性（性别、年龄、地区等），行为属性（设备操作习惯等）。•5、数据分析：埋点作为元数据放在数据仓库中。提供渠道转化、个性推荐等。

埋点的分类：

•1、客户端埋点：需要接入客户端的埋点SDK，将实际的埋点代码嵌入到用户实际访问的页面中，一般用于采集用户的行为流等等，比如点击按钮，访问页面等等。

•2、服务端埋点：服务端埋点的原理和客户端埋点大体类似，只不过将埋点的主体放到了服务端，通过接入服务端的SDK后，在服务端代码中调用埋点API进行相关的埋点。

两种分类各有各的好处和缺点，可以结合实际的需求来选择哪一种方式埋点。

埋点的方式：

我们这里主要介绍一下web端的埋点方式，主要分为3类：

•1、代码埋点

代码埋点，顾名思义，就是在页面的开发过程中，手动将埋点代码嵌入业务代码，然后在访问页面的过程中通过某种方式来触发埋点的上报。代码埋点也是最常用的方式。

•2、可视化埋点

可视化埋点，作用同代码埋点，但重点在可视化上，它可以显式的展示你需要埋点的页面，产品可以通过鼠标点击或者圈出此页面上你需要对哪些目标（比如确认按钮，输入框，分享按钮等）进行埋点。不过目前我们还未支持这种直接操作页面的埋点。

•3、无埋点

无埋点，也叫全埋点，它其实是结合了2种可视化和代码埋点两种方式的能力。它需要你接入客户端的sdk，接入之后，sdk会自动监听页面上的点击，浏览等动作，在用户触发这些行为的时候，会上报预置定义好的事件。一般埋点流程到这边就要进入数据查询的阶段，但无埋点可以利用这些埋点数据进行可视化圈选和热力图的进一步操作。

哪些地方需要埋点：

埋点是目的导向，不是说页面上随便写一个埋点代码就搞定了，一般情况下，在产品的规划阶段就要思考埋点问题，每一个埋点都要思考后续的数据分析，要带来怎样的结果。同时埋点也不是一劳永逸的，需要不断的根据产品的规划，运营的方向和前置埋点的数据分析结果来合理的调整埋点，最终的目的即是帮助产品收益最大化。

比如活动页，最关心的即是活动参与的人数，活动分享的热度，活动裂变的程度等等，根据这些目的就可以在页面上的关键点击按钮处，比如“我要参加”，“分享给好友”等地方添加埋点，后续产品在后台可一目了然的知道此次活动的实际效果。

埋点的流程：

那在规划好需要的埋点后，实际的流程是怎样的呢，这里根据内部埋点的实际情况做一下流程的介绍。

•1、申请应用ID

产品首先要做的就是去X平台申请一个应用ID，作为你应用的唯一标识，也是后续埋点上报时和其他应用埋点区分的唯一途径。

•2、埋点录入

当产品申请完APPID后，也规划好了需要的埋点，接下来需要去X平台进行一个埋点的录入(如果需要)，简单的说就是产品把每一个需要的埋点的名称，属性都录入到系统里，这也是为了后续的埋点检测做准备。

•3、实际埋点

做完这一切的时候，就可以实际埋点了，产品把接力棒交给开发同学，让开发同学对照埋点文档和录入的埋点信息在代码中接入埋点SDK，然后在需要的地方一一埋上点。

•4、埋点 检测

埋点完成之后，在上线之前还剩下一件事情需要完成，就是去检测这些埋点是否能正常上报，上报的参数是否同预期的一样。这个时候就会用到X的埋点检测，也是之前可能需要录入埋点的原因之一。

当所有的埋点都检测完毕，全部能够正常上报之后，埋点前期要做的事情已经基本上全做完了，接下来就是等待产品上线后，查询埋点的实际数据和根据实际数据做出相应的调整。

•5、查询 埋点 数据

如何查询埋点数据在下一小节详细介绍；

•6、埋点 优化

在得到一份完整的埋点数据之后，产品应该根据数据进行一系列分析之后，对产品的埋点进行一个优化，去掉多余重复的埋点，补充欠缺核心数据的埋点，通过不断的埋点优化的反馈来对自己的产品进行一个长期的优化。

查询埋点数据：

产品上线后，运行了一段时间之后，想要了解这段时间的一个整体数据，那么该如何查询数据呢？

•1、打开火山引擎里面的增长分析X平台，选择你的应用，进入到应用的事件分析中；•2、在事件列表tab中的选择你想要查看的事件，以及对应的指标（总次数，总用户等）；•3、事件下发可以选择过滤参数，最后再选择时间范围；•4、点击查询后就可以显示这段时间内当前事件的一个数据折线图；

•5、除了基础的查询之外，可以在右边的功能区域选择某些属性的进行一个筛选或者分组，比如当前事件中不同的操作系统访问情况；

•6、还可以选择多个事件进行组合计算查询；•7、分析事件埋点的各种指标的最终目的就是可以很轻松的分析产品的日活，月活，按钮点击，跳出率，访问时长等等想要的信息；

无埋点-可视化圈选

在上面介绍了常规埋点的作用，同时也提到了埋点中另外一种方式-无埋点。无埋点的前置流程和手动埋点是一致的，只不过区别在于上报端，无埋点的事件都是自动触发，并不需要业务在代码中添加。

那么无埋点自动上报的数据可以用来做哪些事情呢，圈选就是其中之一。

所谓圈选其实就是在你想要关注的页面上，通过一种可以看见的操作方式，圈出页面上你需要关注的元素或者节点，甚至说某个区域。圈出想要关注的节点后，就可以去分析平台针对性的看到这个节点所有的数据（点击量，访问量等等），简单介绍下操作：

•1、打开可圈选的页面，选择想要关注的区域，比如新用户数；

•2、给这块区域定义一个事件名称，然后保存；

•3、最终就可以在埋点查询的时候查询你自定义的事件名称，来观察这个区域的点击和访问的数量；

无埋点-热图

除了上述的圈选之外，热力图也是无埋点附带的常用能力之一。

热力图简单的说即是以特殊高亮的形式来展示用户访问页面不同区域的频次，热度，深度等信息。是一种非常直观的展示页面哪些地方有较高热度的形式。

上报的方式同样是通过无埋点的形式，然后在热力图的后台进行查询，即可方便的看到热力数据。

其他：

除了上述的埋点相关的能力以外，还可以进行很多分析，比如对单个用户的行为进行分析的行为细查；针对访问的路径的行为路径分析；针对用户信息的用户画像分析，甚至还可以利用埋点进行A/B实验分析，如果对埋点后续的扩展能力或者对其他客户端的埋点能力感兴趣的话可以访问火山引擎官网进一步了解。

福利

特意为大家准备了以下礼物进行抽奖：

字节跳动的水杯

那么如何获奖呢？

获奖分为以下3步

•第1步：关注本公众号「豆皮范儿」•第2步：转发本文到朋友圈并截图。•第3步：在本公众号「豆皮范儿」下回复你的截图

抽奖和领取奖品等其他事项：

•  「豆皮范儿」公众号后台回复「加群」，•  会在粉丝群公开抽奖过程，抽奖结果会单独发文章出来。

The     End

如果你觉得这篇文章对你有帮助，有启发，我想请你帮我2个小忙：

1、点个「在看」，让更多的人也能看到这篇文章内容；

2、关注公众号「豆皮范儿」，公众号后台回复「加群」 加入我们一起学习；

关注公众号的福利持续更新，公众号后台送学习资料：

1、豆皮范儿后台回复「vis」，还可以获取更多可视化免费学习资料。

2、豆皮范儿后台回复「webgl」，还可以获取webgl免费学习资料。

3、豆皮范儿后台回复「算法」，还可以获取算法的学习资料。

4、豆皮范儿后台回复「招聘」，获取各种内推。

字节跳动数据平台前端团队，在公司内负责大数据相关产品的研发。我们在前端技术上保持着非常强的热情，除了数据产品相关的研发外，在数据可视化、海量数据处理优化、web excel、WebIDE、私有化部署、工程工具都方面都有很多的探索和积累，有兴趣可以与我们联系。

更多精彩文章，欢迎关注 “豆皮范儿”